<template>
	<div class="app">
		<h2>姓名:{{ person.name }}</h2>
		<h2>年龄:{{ person.age }}</h2>
		<button @click="person.age += 1">修改年龄</button>
		<hr>
		<h2>{{ car2 }}</h2>
		<button @click="car2.price += 10">修改价格</button>
	</div>
</template>

<script setup lang="ts" name="App">
import { reactive, toRaw, markRaw } from 'vue';
import mockjs from 'mockjs'

/** toRaw */
let person = reactive({
	name: 'tony',
	age: 25
})
let rawPerson = toRaw(person) // 用于获取一个响应式对象的原始对象

// console.log(person);
// console.log(rawPerson);

function showPerson(p) {
	p.age += 10
	p.name += '$'
	console.log(p);
}

/** markRaw */
let car = markRaw({ brand: '比亚迪', price: 12 }) // 标记一个对象,使其永远不会变成响应式的.
let car2 = reactive(car)
console.log(car);
console.log(car2);

let mockJs = markRaw(mockjs)
console.log(mockJs);

</script>

<style scoped>
.app {
	background-color: skyblue;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin-left: 10px;
}
</style>